// Define the overlay, derived from google.maps.OverlayView
function Center(opt_options) {
  // Initialization
  this.setValues(opt_options);

  // Center specific
  var div1 = document.createElement('div');
  div1.style.cssText = 'position: absolute; left: -20px; top: -20px; ' +
                       'border-right: 1px solid red; border-bottom: 1px solid red; width: 19px; height: 19px';
  var div2 = document.createElement('div');
  div2.style.cssText = 'position: absolute; left: 1px; top: -20px; ' +
                       'border-left: 1px solid red; border-bottom: 1px solid red; width: 19px; height: 19px';
  var div3 = document.createElement('div');
  div3.style.cssText = 'position: absolute; left: -20px; top: 1px; ' +
                       'border-right: 1px solid red; border-top: 1px solid red; width: 19px; height: 19px';
  var div4 = document.createElement('div');
  div4.style.cssText = 'position: absolute; left: 1px; top: 1px; ' +
                       'border-left: 1px solid red; border-top: 1px solid red; width: 19px; height: 19px';

  var div = this.div_ = document.createElement('div');
  div.appendChild(div1);
  div.appendChild(div2);
  div.appendChild(div3);
  div.appendChild(div4);
  div.style.cssText = 'position: absolute; display: none';
};
Center.prototype = new google.maps.OverlayView;

// Implement onAdd
Center.prototype.onAdd = function() {
  var pane = this.getPanes().overlayLayer;
  pane.appendChild(this.div_);

  // Ensures the center is redrawn if the map center changes
  var me = this;
  this.listeners_ = [
    google.maps.event.addListener(this.getMap(), 'center_changed',
        function() { me.draw(); }),
  ];
};

// Implement onRemove
Center.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);

  // Label is removed from the map, stop updating its position/text.
  for (var i = 0, I = this.listeners_.length; i < I; ++i) {
    maps.google.event.removeListener(this.listeners_[i]);
  }
};

// Implement draw
Center.prototype.draw = function() {
  var projection = this.getProjection();
  var position = projection.fromLatLngToDivPixel(this.getMap().getCenter());

  var div = this.div_;
  div.style.left = position.x + 'px';
  div.style.top = position.y + 'px';
  div.style.display = 'block';
};